<template>
	<view class="all">
		<view :class="props.type != false ? 'title' : 'not'">
			<wd-icon style="color: white" name="thin-arrow-left" size="22px" @click="huitui"></wd-icon>
			<button>关注</button>
		</view>
		<view class="boxUp">
			<img src="" alt="" class="_img" />
			<p>
				{{ data.name }}
				<span style="background-color: orange; font-size: 22rpx; padding: 0.1rem">V1</span>
			</p>
			<p style="font-size: 20rpx">
				ID：{{ data._id }}
				<span style="background-color: #323740; color: #626771; padding: 0.1rem; margin-left: 0.5rem; font-size: 18rpx">已认证</span>
			</p>
			<p>
				<span style="color: #626771; margin-right: 0.5vw">
					粉丝
					<span style="color: white">{{ data.my_fensi.length }}</span>
				</span>
				<span style="color: #626771; margin-right: 0.5vw">
					关注
					<span style="color: white">{{ data.my_guanzhu.length }}</span>
				</span>
			</p>
		</view>
		<p class="butText">{{ data.my_desc }}</p>
		<TypeTopVue :video="data.my_video" :dianzan="data.my_like"></TypeTopVue>
		}
		<Bottom></Bottom>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// import Total from '../Find/Totle.vue';
import TypeTopVue from './typeTop/typeTop.vue';
import Bottom from '../Component/bottom';
import { get_user } from '../../api/api';
onMounted(() => {
	getdata();
});
let data = ref([]);
const getdata = async () => {
	let aa = await get_user({});
	data.value = aa.user;
	console.log(aa.user);
};
let props = defineProps({
	type: Boolean,
	default: false
});
const huitui = () => {
	uni.navigateBack({
		delta: 1
	});
};
</script>
<style lang="scss" scoped>
@media (max-width: 800px) {
	.all {
		width: 100vw;
		height: calc(100vh - 70px);
		background-color: #000000;
		margin-bottom: 80px;
		overflow: hidden;
	}
}
@media (min-width: 800px) {
	.all {
		width: 100vw;
		height: calc(100vh - 80px);
		background-color: #000000;
		margin-bottom: 80px;
		overflow: hidden;
	}
}

.boxUp {
	margin-top: 3rem;
	width: 100vw;
	height: 15%;
	padding: 1rem;
	// background-color: cadetblue;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	color: #ffffff;
	font-size: 0.5rem;

	p {
		font-size: 30rpx;
		margin-right: 7rem;
		margin-top: 0.4rem;
	}
}

._img {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
}

.butText {
	width: 100vw;
	// background-color: #323740;
	color: white;
	font-size: 35rpx;
	padding: 0.5em;
}
.title {
	width: 100vw;
	height: 50px;
	display: flex;
	background-color: black;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	padding: 10px;
	button {
		margin: 0;
		border-radius: 39%;
		background-color: yellow;
		color: #000000;
	}
}
.not {
	display: none;
}
</style>
